<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./renderer.js"></script>
    <style>

        .root-wrap {
            display: flex;
            justify-content: center
        }

        .root {
            display: flex;
            place-content: center;
        }

        .container-shell {
            background: gray;
            padding: 30px 4px 50px 4px;
            border: 2px solid black;
            width: auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 10px 20px;
        }

        .container-shell:before {
            content: attr(title);
            position: absolute;
            color: darkgray;
            top: 4px;
            left: 10px;
            text-shadow: 1px 1px black;
        }




        .container {
            background: rgb(13, 14, 27);
            width: 448px;
            height: 278px;
        }

        .input {
            position: absolute;
            display: flex;
            bottom: 15px;
            left: 10px;
            right: 10px;
            color: white;
            place-content: stretch;
        }

        .input input {
            flex: auto;
        }

        .err {
            position: absolute;
            top: 40px;
            left: 10px;
            color: red;
        }

        .option {
            position: absolute;
            top: 4px;
            right: 10px;
            display: flex;
            place-content: center;
        }

        .option span {
            color: white;
        }

        @media (max-width: 720px) {
            #container {
                width: 90vw;
                height: 52.7vw;
            }
        }
    </style>
</head>
<body>
<div class="root-wrap">
    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo">
            <div class="container" id="container"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref"/>
                <button id="play">播放</button>
            </div>
        </div>
    </div>

    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo2">
            <div class="container" id="container2"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref2"/>
                <button id="play2">播放</button>
            </div>
        </div>
    </div>
    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo3">
            <div class="container" id="container3"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref3"/>
                <button id="play3">播放</button>
            </div>
        </div>
    </div>
</div>

<div class="root-wrap">


    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo4">
            <div class="container" id="container4"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref4"/>
                <button id="play4">播放</button>
            </div>
        </div>
    </div>

    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo5">
            <div class="container" id="container5"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref5"/>
                <button id="play5">播放</button>
            </div>
        </div>
    </div>

    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo6">
            <div class="container" id="container6"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref6"/>
                <button id="play6">播放</button>
            </div>
        </div>
    </div>
</div>
<div class="root-wrap">
    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo7">
            <div class="container" id="container7"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref7"/>
                <button id="play7">播放</button>
            </div>
        </div>
    </div>

    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo8">
            <div class="container" id="container8"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref8"/>
                <button id="play8">播放</button>
            </div>
        </div>
    </div>

    <div class="root">
        <div class="container-shell" title="Jessibuca h264 demo9">
            <div class="container" id="container9"></div>
            <div class="input">
                <div>输入URL：</div>
                <input autocomplete="on" value="" id="playHref9"/>
                <button id="play9">播放</button>
            </div>
        </div>
    </div>
</div>
<script>
    var decoderList = ['./ff.js', 'ff_wasm.js', 'libhevc_aac.js', 'libhevc_aac_wasm.js'];
</script>
<script>
    var $player = document.getElementById('play');
    var $playHref = document.getElementById('playHref');
    var $container = document.getElementById('container');

    var jessibuca = new Jessibuca({
        container: $container,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca.onLog = msg => console.error(msg);
    jessibuca.onRecord = (status) => console.log('onRecord', status);
    jessibuca.onPause = () => console.log('onPause');
    jessibuca.onPlay = () => console.log('onPlay');
    jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
    jessibuca.onMute = msg => console.log('onMute', msg);


    $player.addEventListener('click', function () {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href);
        }
    }, false)
</script>
<script>
    var $player2 = document.getElementById('play2');
    var $playHref2 = document.getElementById('playHref2');
    var $container2 = document.getElementById('container2');

    var jessibuca2 = new Jessibuca({
        container: $container2,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca2.onLog = msg => console.error(msg);
    jessibuca2.onRecord = (status) => console.log('onRecord2', status);
    jessibuca2.onPause = () => console.log('onPause2');
    jessibuca2.onPlay = () => console.log('onPlay2');
    jessibuca2.onFullscreen = msg => console.log('onFullscreen2', msg);
    jessibuca2.onMute = msg => console.log('onMute2', msg);


    $player2.addEventListener('click', function () {
        var href = $playHref2.value;
        if (href) {
            jessibuca2.play(href);
        }
    }, false)
</script>
<script>
    var $player3 = document.getElementById('play3');
    var $playHref3 = document.getElementById('playHref3');
    var $container3 = document.getElementById('container3');

    var jessibuca3 = new Jessibuca({
        container: $container3,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca3.onLog = msg => console.error(msg);
    jessibuca3.onRecord = (status) => console.log('onRecord3', status);
    jessibuca3.onPause = () => console.log('onPause3');
    jessibuca3.onPlay = () => console.log('onPlay3');
    jessibuca3.onFullscreen = msg => console.log('onFullscreen3', msg);
    jessibuca3.onMute = msg => console.log('onMute3', msg);


    $player3.addEventListener('click', function () {
        var href = $playHref3.value;
        if (href) {
            jessibuca3.play(href);
        }
    }, false)
</script>
<script>
    var $player4 = document.getElementById('play4');
    var $playHref4 = document.getElementById('playHref4');
    var $container4 = document.getElementById('container4');

    var jessibuca4 = new Jessibuca({
        container: $container4,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca4.onLog = msg => console.error(msg);
    jessibuca4.onRecord = (status) => console.log('onRecord4', status);
    jessibuca4.onPause = () => console.log('onPause4');
    jessibuca4.onPlay = () => console.log('onPlay4');
    jessibuca4.onFullscreen = msg => console.log('onFullscreen4', msg);
    jessibuca4.onMute = msg => console.log('onMute4', msg);


    $player4.addEventListener('click', function () {
        var href = $playHref4.value;
        if (href) {
            jessibuca4.play(href);
        }
    }, false)
</script>
<script>
    var $player5 = document.getElementById('play5');
    var $playHref5 = document.getElementById('playHref5');
    var $container5 = document.getElementById('container5');

    var jessibuca5 = new Jessibuca({
        container: $container5,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca5.onLog = msg => console.error(msg);
    jessibuca5.onRecord = (status) => console.log('onRecord5', status);
    jessibuca5.onPause = () => console.log('onPause5');
    jessibuca5.onPlay = () => console.log('onPlay5');
    jessibuca5.onFullscreen = msg => console.log('onFullscreen5', msg);
    jessibuca5.onMute = msg => console.log('onMute5', msg);


    $player5.addEventListener('click', function () {
        var href = $playHref5.value;
        if (href) {
            jessibuca5.play(href);
        }
    }, false)
</script>
<script>
    var $player6 = document.getElementById('play6');
    var $playHref6 = document.getElementById('playHref6');
    var $container6 = document.getElementById('container6');

    var jessibuca6 = new Jessibuca({
        container: $container6,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca6.onLog = msg => console.error(msg);
    jessibuca6.onRecord = (status) => console.log('onRecord6', status);
    jessibuca6.onPause = () => console.log('onPause6');
    jessibuca6.onPlay = () => console.log('onPlay6');
    jessibuca6.onFullscreen = msg => console.log('onFullscreen6', msg);
    jessibuca6.onMute = msg => console.log('onMute6', msg);


    $player6.addEventListener('click', function () {
        var href = $playHref6.value;
        if (href) {
            jessibuca6.play(href);
        }
    }, false)
</script>
<script>
    var $player7 = document.getElementById('play7');
    var $playHref7 = document.getElementById('playHref7');
    var $container7 = document.getElementById('container7');

    var jessibuca7 = new Jessibuca({
        container: $container7,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca7.onLog = msg => console.error(msg);
    jessibuca7.onRecord = (status) => console.log('onRecord7', status);
    jessibuca7.onPause = () => console.log('onPause7');
    jessibuca7.onPlay = () => console.log('onPlay7');
    jessibuca7.onFullscreen = msg => console.log('onFullscreen7', msg);
    jessibuca7.onMute = msg => console.log('onMute7', msg);


    $player7.addEventListener('click', function () {
        var href = $playHref7.value;
        if (href) {
            jessibuca7.play(href);
        }
    }, false)
</script>
<script>
    var $player8 = document.getElementById('play8');
    var $playHref8 = document.getElementById('playHref8');
    var $container8 = document.getElementById('container8');

    var jessibuca8 = new Jessibuca({
        container: $container8,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca8.onLog = msg => console.error(msg);
    jessibuca8.onRecord = (status) => console.log('onRecord8', status);
    jessibuca8.onPause = () => console.log('onPause8');
    jessibuca8.onPlay = () => console.log('onPlay8');
    jessibuca8.onFullscreen = msg => console.log('onFullscreen8', msg);
    jessibuca8.onMute = msg => console.log('onMute8', msg);


    $player8.addEventListener('click', function () {
        var href = $playHref8.value;
        if (href) {
            jessibuca8.play(href);
        }
    }, false)
</script>
<script>
    var $player9 = document.getElementById('play9');
    var $playHref9 = document.getElementById('playHref9');
    var $container9 = document.getElementById('container9');

    var jessibuca9 = new Jessibuca({
        container: $container9,
        videoBuffer: 0.2,
        decoder: decoderList[0], // 默认是 ff.js
        isResize: false, // 是否自适应尺寸
        text: 'DNB', // 文案
        background: 'https://seopic.699pic.com/photo/40011/0709.jpg_wh1200.jpg', // 背景
        loadingText: '加载中' // 加载文案。 默认'加载中。。。。。'
    });

    jessibuca9.onLog = msg => console.error(msg);
    jessibuca9.onRecord = (status) => console.log('onRecord9', status);
    jessibuca9.onPause = () => console.log('onPause9');
    jessibuca9.onPlay = () => console.log('onPlay9');
    jessibuca9.onFullscreen = msg => console.log('onFullscreen9', msg);
    jessibuca9.onMute = msg => console.log('onMute9', msg);


    $player9.addEventListener('click', function () {
        var href = $playHref9.value;
        if (href) {
            jessibuca9.play(href);
        }
    }, false)
</script>
</body>
</html>
